<template>
  <div class="vc-page vc-page-parts">
    <!-- 左侧 - 组织机构树 -->
    <el-tree-sider
      tree-title="组织机构树"
      node-icon="vc-icon vc-icon-tree-org"
      :data="orgTreeData"
      :default-checked-node="defaultChecked"
      @refresh="getAllOrg"
      @node-click="handleNodeClick"
    />

    <!-- 右侧 - 人员列表 -->
    <div class="part-right">
      <!-- 查询条件 -->
      <query-terms ref="queryTerms" :searchConfig="searchConfig" />

      <!-- 操作按钮 -->
      <div class="vc-btns">
        <el-button type="primary" size="small" @click="addDialogVisible = true"
          >新增</el-button
        >
        <el-button
          size="small"
          :disabled="selectedIds.length === 0"
          @click="batchDel"
          >删除</el-button
        >
      </div>

      <!-- 列表展示 -->
      <div class="vc-table">
        <tables
          v-model="tableConfig.tableData"
          :columns="tableConfig.columns"
          :stripe="true"
          @on-selection-change="handleSelectionChange"
        />

        <el-pagination
          :current-page="currentPage"
          @current-change="handleCurrentChange"
          :page-size="GLOBAL.QUERY.PAGE_SIZE"
          :total="total"
          layout="total, prev, pager, next"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 新增 -->
    <add-personnel
      class="personnel-form"
      :orgId="id"
      :dialogVisible="addDialogVisible"
      @close="closeAddDialog"
    ></add-personnel>

    <!-- 修改 -->
    <edit-personnel
      class="personnel-form"
      :entity="entity"
      :dialogVisible="editDialogVisible"
      @close="closeEditDialog"
    ></edit-personnel>
  </div>
</template>

<script>
import AddPersonnel from './add'
import EditPersonnel from './edit'

export default {
  name: 'personnel',
  components: { AddPersonnel, EditPersonnel },
  data () {
    return {
      // 组织机构树
      orgTreeSelect: [],
      orgTreeData: null,
      defaultChecked: {},
      // 查询条件
      searchConfig: {
        items: [
          {
            key: 'name',
            title: '姓名'
          },
          {
            key: 'sex',
            title: '性别',
            type: 'select',
            placeholder: '请选择',
            groups: this.$store.state.dic.listFormat['00001']
          }
        ],
        search: params => {
          this.search(params)
        },
        reset: () => {
          this.reset()
        },
        params: {}
      },
      id: '',
      searchData: {
        name: '',
        sex: ''
      },
      // 列表
      tableConfig: {
        columns: [
          {
            type: 'selection'
          },
          {
            type: 'index'
          },
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '性别',
            key: 'sex',
            formatType: row => this.GLOBAL.formatter.formatTableCol(row.sex, '00001')
          },
          {
            title: '手机号',
            key: 'tel'
          },
          {
            title: '邮箱',
            key: 'email'
          },
          {
            title: '入职时间',
            key: 'hiredate',
            minWidth: '100',
            formatType: row => this.GLOBAL.formatter.formatDateTime(row.hiredate, 'YYYY-MM-DD')
          },
          {
            type: 'option',
            minWidth: '48',
            items: [
              {
                title: '修改',
                class: 'edit',
                click: row => {
                  this.handleEdit(row)
                }
              }
            ]
          }
        ],
        tableData: []
      },
      currentPage: 1,
      total: 0,
      selectedIds: [],
      entity: {},
      addDialogVisible: false,
      editDialogVisible: false
    }
  },
  mounted () {
  },
  methods: {
    /**
     * 获取左侧组织机构树数据
     */
    getAllOrg () {
      this.$api.getAllOrg().then(res => {
        if (!res.success || !res.data || !res.data.length) {
          this.orgTreeData = []
          this.treeEmptyText = this.GLOBAL.QUERY.EMPTY_TEXT
          this.emptyTableData()
          return
        }
        this.orgTreeSelect = this.GLOBAL.array.transToTreeData(res.data)
        this.orgTreeData = [...this.orgTreeSelect, { id: 'other', name: '其他', children: [], pid: null }]
        this.defaultChecked = this.orgTreeData[0]
      })
    },
    /**
     * 树节点被点击时的回调
     */
    handleNodeClick (data, node) {
      this.id = data.id === 'other' ? '' : data.id
      !node ? this.getPersonnelsByOrgId(data.id) : this.$refs.queryTerms.reset()
    },
    /**
     * 获取右侧列表数据
     */
    getPersonnelsByOrgId (id, pageNum = this.currentPage, pageSize = this.GLOBAL.QUERY.PAGE_SIZE, entity = this.searchData) {
      this.$api.getPersonnelsByOrgId({
        data: {
          id: id === 'other' ? '' : id,
          pageNum: pageNum,
          pageSize: pageSize,
          params: entity
        }
      }).then(res => {
        if (!res.success || !res.data.total) {
          this.emptyTableData()
          return
        }
        if (!res.data.records || !res.data.records.length) {
          this.currentPage--
          this.getPersonnelsByOrgId(id)
          return
        }
        this.tableConfig.tableData = res.data.records
        this.total = res.data.total
        this.currentPage = res.data.current
      }).catch(() => {
        this.emptyTableData()
      })
    },
    /**
     * 清空表格数据
     */
    emptyTableData () {
      this.tableConfig.tableData = []
      this.total = 0
      this.currentPage = 1
    },
    /**
     * 点击页数
     */
    handleCurrentChange (val) {
      this.getPersonnelsByOrgId(this.id, val)
    },
    /**
     * 查询
     */
    search (params) {
      this.searchData = this.GLOBAL.filter.filterSpace(params)
      this.currentPage = 1
      this.getPersonnelsByOrgId(this.id)
    },
    /**
     * 重置
     */
    reset () {
      this.search(this.GLOBAL.object.clearValOfObj(this.searchData))
    },
    /**
     * '新增'弹出框关闭事件
     */
    closeAddDialog (val) {
      this.addDialogVisible = false
      val && this.$refs.queryTerms.reset()
    },
    /**
     * 复选框勾选
     */
    handleSelectionChange (val) {
      this.selectedIds = this.GLOBAL.array.selectOneKey(val, 'id')
    },
    /**
     * '删除'按钮点击事件
     */
    batchDel () {
      this.$confirmBox(this.handleDel)
    },
    /**
     * 删除
     */
    handleDel () {
      this.$api.deletePersonnelByIds({
        data: this.selectedIds
      }).then(res => {
        this.getAllOrg()
        res.success && this.$notifyBox('删除成功', 'success')
      })
    },
    /**
     * 操作列-修改
     */
    handleEdit (row) {
      this.entity = Object.assign({}, row)
      this.editDialogVisible = true
    },
    /**
     * '修改'弹出框关闭事件
     */
    closeEditDialog (val) {
      this.editDialogVisible = false
      val && this.getAllOrg()
    }
  }
}
</script>

<style lang="less">
.personnel-form {
  .el-dialog {
    .el-dialog__body {
      padding: 30px 20px 0 !important;
      .personnel-form-top,
      .personnel-form-bottom > div {
        position: relative;
        padding: 25px 20px 0;
        padding-bottom: 7px;
        border: 1px solid #dfe9e8;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        .part-title {
          width: 70px !important;
          height: 30px;
          line-height: 30px;
          position: absolute;
          top: -15px;
          left: 10px;
          color: #444444;
          font-size: 16px;
          background: #fff;
        }
      }
      .personnel-form-top {
        .form-top-left,
        .form-top-center {
          width: 36%;
          .el-date-editor.el-input {
            width: 100%;
          }
        }
        .upload-head {
          position: relative;
          margin-right: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
          &,
          .avatar-uploader,
          img {
            width: 100px;
            height: 100px;
            border-radius: 50px;
          }
          .change-head-tip {
            position: absolute;
            top: calc(100% - 100px);
            width: 100px;
            height: 100px;
            color: #fff;
            border-radius: 50px;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            img {
              width: 36px;
              height: 36px;
              margin-top: 22px;
            }
            div {
              height: 30px;
              margin-top: 3px;
              font-size: 12px;
            }
          }
          .avatar-uploader:hover {
            .change-head-tip {
              display: block;
            }
            .bottom-tips {
              display: none;
            }
          }
          .avatar-uploader:not(:hover) {
            .bottom-tips {
              position: absolute;
              bottom: 0;
              width: 100%;
              height: 26px;
              line-height: 30px;
              display: flex;
              align-items: flex-end;
              background: transparent;
              overflow: hidden;
              & > div {
                width: 100%;
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: flex-end;
                color: #fff;
                font-size: 12px;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 50px;
              }
            }
          }
          .head-del {
            position: absolute;
            bottom: -30px;
            cursor: pointer;
          }
        }
      }
      .personnel-form-center {
        margin: 6px 0;
        text-align: right;
        .vc-icon,
        .el-button--text > span {
          font-size: 15px !important;
        }
        .vc-icon:before {
          margin-right: 1px;
        }
      }
      .personnel-form-bottom {
        margin-bottom: 30px;
        padding: 0 !important;
        display: none;
        & > div > div {
          width: 47%;
        }
      }
    }
  }
}
</style>
